<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <meta name="renderer" content="webkit" />
  <link rel="icon" href="/static/oem/icon.png" type="image/x-icon">
  <title>{{.title}}</title>
</head>

<body>
  <div id="loader">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #loader {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #box {
        position: absolute;
        width: 50px;
        height: 50px;
        background: #1557fb;
        animation: animate .5s linear infinite;
        top: 50%;
        left: calc(50% - 25px);
        border-radius: 3px;
      }

      @keyframes animate {
        17% {
          border-bottom-right-radius: 3px;
        }

        25% {
          transform: translateY(9px) rotate(22.5deg);
        }

        50% {
          transform: translateY(18px) scale(1, .9) rotate(45deg);
          border-bottom-right-radius: 40px;
        }

        75% {
          transform: translateY(9px) rotate(67.5deg);
        }

        100% {
          transform: translateY(0) rotate(90deg);
        }
      }

      @keyframes stop {
        0% {
          top: 50%;
          left: calc(50% - 25px);
        }

        50% {
          top: calc(50% - 25px);
          left: calc(50% - 25px);
          transform: rotate(180deg);
          width: 50px;
          height: 50px;
        }

        100% {
          top: calc(50% - 50px);
          left: 50%;
          width: 0;
          height: 0;
          transform: rotate(560deg);
        }
      }

      #shadow {
        width: 50px;
        height: 5px;
        background: #000;
        opacity: 0.1;
        position: absolute;
        top: calc(50% + 59px);
        left: calc(50% - 25px);
        border-radius: 50%;
        animation: shadow .5s linear infinite;
      }

      @keyframes shadow {
        50% {
          transform: scale(1.2, 1);
        }
      }

      @keyframes shadowstop {
        17% {
          transform: scale(1.2, 1);
        }

        50% {
          transform: scale(1, 1);
        }

        100% {
          transform: scale(0, 1);
        }
      }
    </style>
    <div id="shadow"></div>
    <div id="box"></div>
  </div>
  <div id="root"></div>
  <div id="media-siders"></div>
</body>

</html>